<template>
    <div class="spec-preview">
        <img :src="image.imgUrl" />
        <div class="event" @mousemove="changeMove"></div>
        <div class="big">
            <img :src="image.imgUrl" ref="big" />
        </div>
        <div class="mask" ref="mask"></div>
    </div>
</template>

<script>
    export default {
        name: "Zoom",
        data() {
            return {
                index: 0
            }
        },
        props: ['skuImageList'],
        computed: {
            //根据索引找到图片所在的数组，为空防止假报错
            image() {
                return this.skuImageList[this.index] || [];
            }
        },
        methods: {
            changeMove(e) {
                let mask = this.$refs.mask;
                let big = this.$refs.big;

                //蒙版据的left的值为鼠标据左侧的距离减蒙版宽度的一半
                let x = e.offsetX - mask.offsetWidth / 2;
                //限制蒙版left，防止超出边界
                if (x < 0) x = 0;
                if (x > e.target.offsetWidth / 2) x = e.target.offsetWidth / 2;

                //蒙版据上侧的距离为鼠标据上侧的距离减蒙版高度的一半
                let y = e.offsetY - mask.offsetHeight / 2;
                if (y < 0) y = 0;
                if (y > e.target.offsetHeight / 2) y = e.target.offsetHeight / 2;

                mask.style.left = x + 'px';
                mask.style.top = y + 'px';

                big.style.left = -x * 2 + 'px';
                big.style.top = -y * 2 + 'px';
            }
        },
        mounted() {
            this.$bus.$on('changeImg', (index) => {
                this.index = index;
            })
        }
    }
</script>

<style lang="less">
    .spec-preview {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;

        img {
            width: 100%;
            height: 100%;
        }

        .event {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
        }

        .mask {
            width: 50%;
            height: 50%;
            background-color: rgba(0, 255, 0, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big {
            width: 100%;
            height: 100%;
            position: absolute;
            top: -1px;
            left: 100%;
            border: 1px solid #aaa;
            overflow: hidden;
            z-index: 998;
            display: none;
            background: white;

            img {
                width: 200%;
                max-width: 200%;
                height: 200%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        .event:hover~.mask,
        .event:hover~.big {
            display: block;
        }
    }
</style>